<template>
  <div class="app-container">
    <el-dialog
      title="审批历史"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="90%"
      top="50px"
      custom-class="historyDialog"
    >
      <div v-if="isLoadingStatus" />
      <div v-else>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="流程审批进度历史" name="first">
            <div class="text item">
              <el-table
                :data="circulationHistoryList"
                border
                style="width: 100%"
                stripe
                max-height="600"
              >
                <el-table-column
                  prop="id"
                  label="#"
                  align="center"
                  type="index"
                  width="70"
                />
                <el-table-column prop="state" label="任务名称" align="center" />
                <el-table-column
                  prop="processor"
                  label="处理人"
                  align="center"
                />
                <el-table-column prop="status" label="审批操作" align="center">
                  <template slot-scope="scope">
                    <div v-if="scope.row.status == 1">
                      审批通过
                    </div>
                    <div v-if="scope.row.status == 2">
                      提交成功
                    </div>
                    <div v-if="scope.row.status == 0">
                      审批驳回
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="remarks"
                  label="审批意见"
                  align="center"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  prop="cost_duration"
                  label="耗时"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div>{{ getDuration(scope.row.cost_duration) }}</div>
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="circulation" label="流转" align="center" /> -->
                <el-table-column
                  prop="create_time"
                  label="处理时间"
                  align="center"
                  width="180"
                />

                <el-table-column
                  prop="status"
                  label="状态"
                  align="center"
                  width="90"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.status == 3" class="warning-color">
                      待处理
                    </div>
                    <div v-else class="primary-color">
                      已办理
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'

import { processStructure } from '@/api/xjs/work-order'
import { getDuration } from '@/utils/costum'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      activeName: 'first',
      getDuration,
      dialogVisible: false,
      isLoadingStatus: true,
      currentNode: {
        hideTpls: null,
        writeTpls: null
      },
      nodeStepList: [],
      circulationHistoryList: [],
      activeIndex: 0,
      processStructureValue: {
        workOrder: { title: '' }
      },
      processId: null,
      workOrderId: null
    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  created() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    open(processId, workOrderId) {
      this.processId = processId
      this.workOrderId = workOrderId
      this.getProcessNodeList()
    },
    getProcessNodeList() {
      processStructure({
        processId: this.processId,
        workOrderId: this.workOrderId
      }).then(response => {
        this.processStructureValue = response.data
        this.circulationHistoryList = this.processStructureValue.circulationHistory
        if (
          this.processStructureValue.workOrder.current_state_name !=
            '处置完成' &&
          this.processStructureValue.workOrder.status != 3
        ) {
          const currentCirculation = {
            state: this.processStructureValue.workOrder.current_state_name,
            processor: this.processStructureValue.workOrder.principals,
            status: 3,
            remarks: '',
            cost_duration: 0,
            circulation: this.processStructureValue.workOrder.current_state_name
          }
          this.circulationHistoryList.unshift(currentCirculation)
        }

        // 获取当前展示节点列表
        this.nodeStepList = []
        if (this.processStructureValue.nodes) {
          for (var i = 0; i < this.processStructureValue.nodes.length; i++) {
            if (
              this.processStructureValue.nodes[i].id ===
              this.processStructureValue.workOrder.current_state
            ) {
              // 当前节点
              this.nodeStepList.push(this.processStructureValue.nodes[i])
              this.activeIndex = this.nodeStepList.length - 1
              if (i + 1 === this.processStructureValue.nodes.length) {
                this.activeIndex = this.nodeStepList.length
              }
              this.currentNode = this.processStructureValue.nodes[i]
            } else if (!this.processStructureValue.nodes[i].isHideNode) {
              // 非隐藏节点
              this.nodeStepList.push(this.processStructureValue.nodes[i])
            }
          }
        }
        console.log(this.nodeStepList)
        this.dialogVisible = true
        this.isLoadingStatus = false
      })
    }
  }
}
</script>
